<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <li>
            <p>您好</p>
            <p>价格:{{price}}</p>
            <p>
                <button @click="subNum">-</button>
                <span>数量:{{count}}</span>
                <button @click="addNum">+</button>
            </p>
            <p>总价: {{(price * count).toFixed(1)}}</p>
        </li>
    </div>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script>
        const { createApp} = Vue;
        // 创建实例并挂载
        createApp({
            data:function(){
                return {
                    price:123.456,
                    count:1
                }
            },
            methods:{
                addNum(){
                    this.count++;
                },
                subNum(){
                    this.count>1 && this.count--;
                }   
            }
        }).mount('#app')
    </script>

</body>
</html>